<template>
	<view class="themeItem">
		<navigator class="box" :url="'/pages/classlist/classlist?id='+item._id+'&name='+item.name" v-if="isMore" >
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			 <view class="mask">
			 	{{item.name}}
			 </view>
			 <view class="tab" v-if="timeAgo(item.updateTime)">
				 {{timeAgo(item.updateTime)}}更新
			 	<!-- {{parseInt((+new Date()-item.updateTime)/1000/60/60/24)}}天前 -->
			 </view>
		</navigator>
		
		
		
		<navigator class="box more" url="/pages/classify/classify" open-type="switchTab" v-else>
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			 
			 <view class="mask">
				 <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
				 <view class="text">更多</view>
			 </view>
		</navigator>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import	{timeAgo} from '@/utils/common.js'
	
const data = defineProps({
		isMore:{
			type:Boolean,
			default:true
		},
		item:{
			type:Object,
			default(){
				return{
					name:'名字',
					picurl:"https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/xxmBizhi/20231023/1698029728922_0_small.webp",
					updateTime:Date.now()-1000*60*60*5
				}
			}
		}
	})
	
	

</script>

<style lang="scss">
.themeItem{
	.box{
			border-radius: 15rpx;
			overflow: hidden;
			position: relative;
		.pic{
			width: 100%;
			height: 340rpx;
		}
		
		.mask{
			width: 100%;
			height: 70rpx;
			position: absolute;
			bottom: 0;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			
			// 下面两行为：添加磨砂背景
			background: rgba(0, 0, 0, .2);
			backdrop-filter: blur(20rpx);
			
			font-weight: 600;
			font-size: 30rpx;
		}
		.tab{
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(250, 129, 90, 0.7);
			backdrop-filter: blur(20rpx);
			border-radius: 0 0 20rpx 0;
			padding: 0 15rpx;
			font-size: 22rpx;
			color: #fff;
			
			// 下面两行为，固定某个角，进行整体缩放
			transform: scale(.9);
			transform-origin: left top;
		}
	}

	
	.box.more{
		.mask{
			width: 100%;
			height: 100%;
			flex-direction: column;
		}
		
		.text{
			font-size: 28rpx;
		}
	}
}
</style>